<template>
  <div class="hu-picker">
    <slot>
      <div
        @click="showPicker = true"
        class="hu-picker-value"
        :style="color ? 'color:' + color : ''"
      >
        <span>{{ getColumnsText(value, columns) }}</span>
        <van-icon name="play" class="hu-picker-link" />
      </div>
    </slot>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        item-height="60"
      />
    </van-popup>
  </div>
</template>

<script>
import { getColumnsText } from "@/js/auth";
export default {
  name: "HuPicker",
  props: {
    // 选项列表
    columns: {
      type: Array,
      default: () => [
        // {text: '杭州',value:'1'}
      ],
    },
    // 选中选中
    value: {
      type: [String, Number],
      default: "",
    },
    // 颜色
    color: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      showPicker: false,
    };
  },

  methods: {
    onConfirm(value) {
      this.showPicker = false;
      this.$emit("update:value", value.value);
      this.$emit("change", value.value);
    },
    getColumnsText,
  },
};
</script>

<style lang="less" scoped>
.hu-picker-value {
  // color: @blue;
  display: flex;
  align-items: center;
}
.hu-picker-link {
  transform: rotate(90deg);
  margin-left: 4px;
  font-size: 12px;
}
</style>
